
/**
 * #info
 *@author   wuwg
 *@createTime   2018/03/20
 *@updateTime    2018/05/09
 *@description  pagination  component  分页组件
 */

/**
 * #item
 *
 * @type        aty-pagination
 * @cn          分页
 * @menu        分页
 * @stPlugin    true
 * @stContainer false
 */

import config from '../../../config/config.js'

// import Options from './options.vue';
import Locale from '../../../mixins/locale.js'
import paginationOptions from '../pagination-options/index.vue'
const prefixCls = config.prefix + '-pagination'

// 模块
const module = {
  name: config.prefix + '-pagination',
  mixins: [Locale],
  components: { paginationOptions },
  props: {

    /**
     * #property
     *
     * @name offset
     * @cn   数据偏移量，对应sql查询中的limit
     * @type number
     * @bind must
     * @value 1
     * @description   数据偏移量，对应sql查询中的limit，支持 .sync 修饰符
     */
    offset: {
      type: Number,
      default: 0
    },
    /**
     * #property
     *
     * @name total
     * @cn   数据总条数
     * @type number
     * @bind must
     * @value 0
     * @description  数据总条数
     */
    total: {
      type: Number,
      default: 0
    },
    /**
     * #property
     *
     * @name limit
     * @cn   每页数据条数
     * @type number
     * @bind must
     * @value 10
     * @description  每页数据条数
     */
    limit: {
      type: Number,
      default: 10
    },
    /**
     * #property
     *
     * @name limitOpts
     * @cn   每页条数切换的配置
     * @type string
     * @bind must
     * @value [10, 20, 30, 40]
     * @description  每页条数切换的配置，默认[10, 20, 30, 40]
     */
    limitOpts: {
      type: Array,
      default () {
        return [10, 20, 30, 40]
      }
    },
    /**
     * #property
     *
     * @name  placement
     * @cn    条数切换弹窗的展开方向
     * @type  list
     * @options [bottom, top]
     * @value    bottom
     * @description  条数切换弹窗的展开方向,可选值为 [ bottom, top] 中的一个
     */
    placement: {
      validator (value) {
        return Artery.isOneOf(value, ['top', 'bottom'])
      },
      default: 'bottom'
    },
    /**
     * #property
     *
     * @name  size
     * @cn    迷你版
     * @type  list
     * @options [small]
     * @description  迷你版,可选值为 [ small] 中的一个，或不填
     */
    size: {
      validator (value) {
        return Artery.isOneOf(value, ['small'])
      }
    },
    /**
     * #property
     *
     * @name  simple
     * @cn    是否是简洁版
     * @type  boolean
     * @value  false
     * @description  是否是简洁版
     */
    simple: {
      type: Boolean,
      default: false
    },
    /**
     * #property
     *
     * @name  showTotal
     * @cn    是否显示总数
     * @type  boolean
     * @value  false
     * @description  是否显示总数
     */
    showTotal: {
      type: Boolean,
      default: false
    },

    /**
     * #property
     *
     * @name  showElevator
     * @cn    是否显示电梯
     * @type  boolean
     * @value  false
     * @description  是否显示电梯,可以快速切换到某一页
     */
    showElevator: {
      type: Boolean,
      default: false
    },
    /**
     * #property
     *
     * @name  showSizer
     * @cn    是否显示分页数
     * @type  boolean
     * @value  false
     * @description  是否显示分页数，用来改变page-size
     */
    showSizer: {
      type: Boolean,
      default: false
    },
    /**
     * #property
     *
     * @name  className
     * @cn    自定义 class 名称
     * @type  string
     * @description  自定义 class 名称
     */
    className: {
      type: String
    },

    /**
     * #property
     *
     * @name  showOnePage
     * @cn    一页是否显示
     * @type  boolean
     * @bind    must
     * @value  true
     * @description  一页是否显示
     */
    showOnePage: {
      type: Boolean,
      default: true // 默认显示
    },
    /**
     * #property
     *
     * @name  current
     * @cn    当前页
     * @type  number
     * @description  绑定当前页，支持.sync修饰符
     */
    current: {
      type: Number,
      default: 1
    },
    /**
     * #property
     *
     * @name    transfer
     * @cn      是否将弹层放置于 body 内
     * @type   boolean
     * @value  false
     * @description  是否将弹层放置于 body 内，
     *              在 Tabs、带有 fixed 的 Table 列内使用时，建议添加此属性，它将不受父级样式影响，从而达到更好的效果
     */
    transfer: {
      type: Boolean,
      default: false
    },
    /**
     * #property
     *
     * @name    expAll
     * @cn      导出全部
     * @type    boolean
     * @group   导出
     * @value   false
     * @description  是否支持导出全部数据到excel，如果为true则显示导出全部图标
     */
    expAll: {
      type: Boolean,
      default: false
    },
    /**
     * #property
     *
     * @name    maxDataCount
     * @cn      最大数量
     * @type    number
     * @group   分页
     * @value   0
     * @description 不分页情况避免数据量过大请求卡死, 也控制导出全部, 0不限制 @since 1.0.3
     */
    maxDataCount: {
      type: Number,
      default: 0
    },
    /**
     * #property
     *
     * @name    expCurrentPage
     * @cn      导出当前页
     * @type    boolean
     * @group   导出
     * @value   false
     * @description  是否支持导出当前页数据到excel，如果为true则显示导出当前页图标
     */
    expCurrentPage: {
      type: Boolean,
      default: false
    },
    /**
     * #property
     *
     * @name  leastPages
     * @cn    可点击跳转的页数链接，只显示最少的数量
     * @type  boolean
     * @value  false
     * @description  可点击跳转的页数链接，只显示最少的数量
     */
    leastPages: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    // 数据总条数
    total (val) {
      const maxPage = Math.ceil(val / this.currentPageSize)
      if (maxPage < this.currentPage && maxPage > 0) {
        this.changePage(maxPage)
        this.currentPage = maxPage
      }
      this.currentTotal = val
    },
    // 当前偏移
    offset (val) {
      if (val >= 0){
      // 改变每页显示条数后this.limit没有变，导致currentPage计算错误，下面用this.currentPageSize计算
        this.currentPage = Math.floor(val / this.currentPageSize) + 1
      }else{
        return false
      }
    },
    // 当前页的数据条数
    limit (val) {
      this.currentPageSize = val
    },
    // 当前页
    current (val) {
      if (val < 1) {
        this.$emit('update:current', 1)
        return false
      } else if (val > this.allPages) {
        this.$emit('update:current', this.allPages)
        return false
      } else {
        this.currentPage = val
      }
    },
    currentPage (val) {
      if (val > 9999) {
        this.scope.pageInputWidth = (val.toString().length - 4) * 5 + 50
      } else {
        this.scope.pageInputWidth = 50
      }
    }
  },
  data () {
    return {
      prefixCls: prefixCls,
      currentTotal: this.total, // 当前页
      currentPage: this.current && this.current > 0 && this.offset < 1 ? this.current : Math.floor(this.offset / this.limit) + 1, // 当前页
      currentPageSize: this.limit, // 当前页的数据条数
      scope: {
        className: config.prefix + '-pagination',
        pageInputWidth: 50
      }
    }
  },
  computed: {
    // 上一页小图标
    prevIconClass () {
      return [
                `${config.prefix}-icon`,
                `${config.prefix}-icon-ios-arrow-left`
      ]
    },
    // 下一页小图标
    nextIconClass () {
      return [
                `${config.prefix}-icon`,
                `${config.prefix}-icon-ios-arrow-right`
      ]
    },
    // 是否是迷你分页
    isSmall () {
      return !!this.size
    },
    // 总页数
    allPages () {
      const allPage = Math.ceil(this.currentTotal / this.currentPageSize)
      return (allPage === 0) ? 1 : allPage
    },
    //  简洁分页的外部class
    simpleWrapClasses () {
      return [
                `${prefixCls}`,
                `${prefixCls}-simple`,
                {
                  [`${this.className}`]: !!this.className,
                  mini: !!this.size
                }
      ]
    },
    // 简单分页class
    simplePagerClasses () {
      return `${prefixCls}-simple-pager`
    },
    wrapClasses () {
      return [
                `${prefixCls}`,
                {
                  [`${this.className}`]: !!this.className,
                  mini: !!this.size
                }
      ]
    },
    // 前一页class
    prevClasses () {
      return [
                `${prefixCls}-prev`,
                {
                  [`${prefixCls}-disabled`]: this.currentPage === 1
                }
      ]
    },
    // 后一页class
    nextClasses () {
      return [
                `${prefixCls}-next`,
                {
                  [`${prefixCls}-disabled`]: this.currentPage === this.allPages
                }
      ]
    },
    // 第一页class
    firstPageClasses () {
      return [
                `${prefixCls}-item`,
                {
                  [`${prefixCls}-item-active`]: this.currentPage === 1
                }
      ]
    },
    // 最后一页class
    lastPageClasses () {
      return [
                `${prefixCls}-item`,
                {
                  [`${prefixCls}-item-active`]: this.currentPage === this.allPages
                }
      ]
    },
    // 导出数据class
    exportClasses () {
      return [
                `${prefixCls}-export`
      ]
    },
    show: function () {
      return this.allPages > 1 ? true : (!!this.showOnePage)
    }
  },
  methods: {
    // 改变分页 limitChanged:分页大小是否改变
    changePage (page, limitChanged) {
      if (this.currentPage !== page || limitChanged) {
        this.currentPage = page
        this.$emit('update:current', page)
        const pageInfo = {
          offset: (this.currentPage - 1) * this.currentPageSize,
          limit: this.currentPageSize
        }
        this.$emit('update:offset', pageInfo.offset)
        if (limitChanged) {
          this.$emit('update:limit', pageInfo.limit)
        }
        /**
         * #event
         *
         * @name change
         * @cn 切换页码
         * @param pageInfo {current:1, pageSize:10}
         * @body  console.log(pageInfo.current);
         * @description 按钮的点击时方法
         */
        this.$emit('change', pageInfo)
      }
    },
    prev () {
      const current = this.currentPage
      if (current <= 1) {
        return false
      }
      this.changePage(current - 1)
    },
    next () {
      const current = this.currentPage
      if (current >= this.allPages) {
        return false
      }
      this.changePage(current + 1)
    },
    fastPrev () {
      const page = this.currentPage - 5
      if (page > 0) {
        this.changePage(page)
      } else {
        this.changePage(1)
      }
    },
    fastNext () {
      const page = this.currentPage + 5
      if (page > this.allPages) {
        this.changePage(this.allPages)
      } else {
        this.changePage(page)
      }
    },
    onSize (pageSize) {
      const limitChanged = this.currentPageSize !== pageSize
      this.currentPageSize = pageSize
      /**
       * #event
       *
       * @name page-size-change
       * @cn 切换每页条数
       * @param pageSize 页大小，Number类型
       * @body   console.log(pageSize);
       * @description 按钮的点击时方法
       */
      this.$emit('page-size-change', pageSize)
      this.changePage(1, limitChanged)
    },
    onPage (page) {
      this.changePage(page)
    },
    keyDown (e) {
      const key = e.keyCode
      const condition = (key >= 48 && key <= 57) || (key >= 96 && key <= 105) || key === 8 || key === 37 || key === 39

      if (!condition) {
        e.preventDefault()
      }
    },
    keyUp (e) {
      const key = e.keyCode
      const val = parseInt(e.target.value)
      if (key === 38) {
        this.prev()
      } else if (key === 40) {
        this.next()
      } else if (key === 13) {
        let page = 1
        if (val > this.allPages) {
          page = this.allPages
        } else if (val <= 0 || !val) {
          page = 1
        } else {
          page = val
        }
        e.target.value = page
        this.changePage(page)
      }
    },
    handleExportData (type) {
      /**
       * #event
       *
       * @name    exportdata
       * @cn      导出数据
       * @param   type    导出类型 'current'或者'all'
       * @body
       * @description 导出数据时触发
       */
      this.$emit('exportdata', type)
    }
  },
  updated () {

  },
  created () {

  },
  mounted () {

  }
}
export default module
